import React from 'react';

import styles from './subframe.css';
import TextInfo from "./TextInfo";

// 订阅的页面，填写邮箱和昵称即可实现订阅
class SubsFrame extends React.Component {

  handleCancel = () => {
    this.props.cancel();
  };

  handleSubmit = () => {
    const email = document.getElementById('emailInput');
    const nick = document.getElementById('nickInput');

    const reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if (!reg.test(email.value)) {
      email.placeholder = '请输入合法的邮箱';
      email.value = '';
      email.focus();
      email.style.borderColor = 'red';
      return;
    }

    if (nick.value.length > 10) {
      nick.placeholder = '昵称长度请小于10';
      nick.value = '';
      nick.focus();
      nick.style.borderColor = 'red';
      return;
    }

    console.log('meail: ', email.value, 'nick:', nick.value);
    this.props.submit({
      email: email.value,
      nick: nick.value
    });
  };

  render() {

    return (
      <div className={styles.container}>
        <div className={styles.panel}>
          <TextInfo info={'添加订阅'} sub={'每天获取一张精美诗词图'} styles={{
            borderRadius: '1em 1em 0 0',
            padding: '0.2em',
            margin: 0,
            paddingTop: '.5em',
            borderBottom: '1px dotted lightgray',
            backgroundColor: '#fafafa',
          }}/>

          <div className={styles.content}>
            <div>
              <input id={'emailInput'} placeholder={'请输入邮箱'}/>
            </div>
            <div>
              <input id={'nickInput'} placeholder={'请输入昵称'}
                     style={{marginTop: 0}}
              />
            </div>
            <div className={styles.label_container}>
              <label onClick={this.handleCancel}>关闭</label>
              <label onClick={this.handleSubmit}>提交</label>
            </div>
          </div>
        </div>

      </div>
    )
  }
}

export default SubsFrame;
